import React, { FC, useEffect, useState, useTransition } from 'react';
export const DeferredValueComponent: FC = () => {
    const [kw, setKw] = useState('');

    const [,startTransition] = useTransition();
    const kwChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        // 使用useTransition把这个函数变成低优先级，但是 input输入快的时候 会丢失数据；
        startTransition(()=>{
            setKw(e.target.value);
        })
    }
    return <>
        <h3>useDeferredValue</h3>
        <input type="text" value={kw} onChange={kwChange} />
        <hr />
        
        <SearchBodyList query={kw}></SearchBodyList>

        {/* <SearchBody query={kw}></SearchBody> */}
    </>
}

export const SearchBodyList: FC<{ query: string }> = (props) => {
    if (!props.query) return

    const items = Array(9999).fill(props.query).map((item, index) => {
        return <li key={index}>{item}</li>
    })
    return items
}


export const SearchBody: FC<{ query: string }> = (props) => {
    const arrys: string[] = [];
    const [list, setList] = useState(arrys);
    useEffect(() => {
        let arry = props.query.split("");
        setList(arry);
    }, [props.query])
    return <>
        <ul>

            {list.map((item, index) => {
                return <li key={index}>{item}</li>
            })}
        </ul>
    </>
}